<template>
   <div>
     <!--导航区域-->
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>项目管理</el-breadcrumb-item>
       <el-breadcrumb-item>项目组管理</el-breadcrumb-item>
     </el-breadcrumb>

     <!--卡片布局-->
     <el-card>
       <el-row :gutter="20">
         <el-col :span="7">
           <el-button type="primary" @click="closeDialogVisible = true">新建项目组</el-button>
         </el-col>
       </el-row>

         <!--放表格-->
         <el-table :data="groupList" border stripe>
           <!--展开列-->
           <el-table-column type="expand">
             <template slot-scope="scope">
               <el-row v-for="(item,i1) in scope.row.childrenList" :key="i1" :class="['bdbottom',i1 === 0 ? 'bdtop':'','vcenter']">
                 <!--渲染一级数据,区域占5列-->
                 <el-col :span="5">
                   <el-tag effect="plain">{{item.planName}}</el-tag>
                   <i class="el-icon-caret-right"></i>
                 </el-col>
                 <!--渲染二数据-->
                 <el-col :span="19">
                   <el-row v-for="(item2,i2) in item.userNames" :key="i2" :class="[i2 === 0 ? '':'bdtop','vcenter']">
                     <el-col :span="6">
                       <el-tag type="success" effect="plain">{{item2}}</el-tag>
                     </el-col>
                   </el-row>
                 </el-col>
               </el-row>

             </template>
           </el-table-column>
           <!--索引列-->
           <el-table-column type="index" label="#"></el-table-column>
           <el-table-column label="组名">
             <template slot-scope="scope">
               <span style="color:#409EFF" size="medium"><i class="el-icon-s-home"></i>{{ scope.row.groupName }}</span>
             </template>
           </el-table-column>
           <el-table-column label="进行中的计划">
             <template slot-scope="scope">
               <span style="color:#F56C6C" v-if="!scope.row.planNames">
                  没有进行中的计划
                </span>
               <span style="color:#67C23A" size="medium" v-else><i class="el-icon-s-opportunity"></i>{{ scope.row.planNames }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
               <el-button type="primary" icon="el-icon-edit" size="mini" @click="showUpdateGroupNameDialog(scope.row.groupId)">修改组名</el-button>
              <!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteGroup(scope.row.groupName)">删除</el-button>-->
             </template>
           </el-table-column>
         </el-table>

       <!--分页-->
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="groupData.pageNum"
         :page-sizes="[8,1, 2, 5, 10]"
         :page-size="groupData.pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="groupData.total">
       </el-pagination>

     </el-card>

     <!--增加项目组的对话框-->
     <el-dialog
       title="新建项目组"
       :visible.sync="closeDialogVisible"
       width="25%"
       @close="clearForm()">
       <el-form :model="groupData" label-width="60px" ref="addGroupForm" label-position="left" :rules="addGroupRules">
         <el-form-item label="组名:" prop="addGroupName">
           <el-input v-model="groupData.addGroupName" size="small" ></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addGroup()">确 定</el-button>
       </span>
     </el-dialog>

     <!--编辑对话框-->
     <el-dialog
       title="修改组名"
       :visible.sync="closeEditDialogVisible"
       width="25%"
       @close="clearForm('updateGroupNameForm')">
       <el-form :model="groupData" label-width="80px" ref="updateGroupNameForm" label-position="left" :rules="updateGroupRules">
         <el-form-item label="新组名:" prop="updateGroupName">
           <el-input v-model="groupData.updateGroupName" size="small" ></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
          <el-button @click="closeEditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateGroupName()">修 改</el-button>
       </span>
     </el-dialog>

   </div>

</template>

<script>
    export default {
        name: "AddGroup",
        data(){
          return{
            groupData: {
              addGroupName: '',
              updateGroupName: '',
              groupId: '',
              //当前的页数
              pageNum: 1,
              //每页显示多少条数据
              pageSize: 8,
              total: 0
            },
            addGroupRules: {
              addGroupName: [
                { required: true, message: '请输组名', trigger: 'blur' }
              ]
            },
            updateGroupRules: {
              updateGroupName: [
                { required: true, message: '请输入要更改的组名', trigger: 'blur' }
              ]
            },
            groupList: [],
            closeDialogVisible: false,
            closeEditDialogVisible: false

          }
        },
      //当页刷新的时候调用
      created() {
          this.getGroupList();
      },
      methods: {
        async getGroupList(){
          //发起get请求获取组数据
          const {data:res} = await this.$http.get(`teamGroup/getGroupList/${this.groupData.pageNum}/${this.groupData.pageSize}`);
          if(res.status !== 200){
            this.$message.error(res.msg);
          }
          this.groupList = res.data.teamGroupVoList;
          this.groupData.total = res.data.total;   //总数
          console.log(res);

        },
        addGroup(){
          //post请求增加项目组
          this.$refs.addGroupForm.validate(async valid => {
            if (valid){
              var fd = new FormData();
              fd.append("groupName",this.groupData.addGroupName);
              const {data: res} = await this.$http.post("teamGroup/addGroup",fd);
              if (res.status == 200){
                //刷新
                this.getGroupList();
                this.closeDialogVisible = false;
                this.$message.success("增加成功");
                return true;
              }else {
                this.$message.error(res.msg);
              }
            }else {
              return this.$message.error("请填写表单");
            }

          });


        },
        clearForm(){
          this.$refs.addGroupForm.resetFields();
          this.$refs.updateGroupNameForm.resetFields();

        },
        showUpdateGroupNameDialog(groupId){
          this.closeEditDialogVisible = true;
          this.groupData.groupId = groupId;
        },
        updateGroupName(){
          //发送put请求
          this.$refs.updateGroupNameForm.validate(async valid => {
            if (valid){
              const {data: res} = await this.$http.put(`teamGroup/updateGroupName/${this.groupData.groupId}/${this.groupData.updateGroupName}`);
              if (res.status == 200){
                this.getGroupList();
                this.$message.success("更改成功");
                this.closeEditDialogVisible = false;
                return true;
              }else {
                return this.$message.error(this.msg);
              }
            }else {
              return this.$message.error("请填写表单");
            }
          });

        },
        async deleteGroup(groupName){
          const confirmResult = await this.$confirm('此操作将永久删除该组, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => {
            return err;
          });
          //当用户确认时，则返回值为字符串：confirm
          //取消时，返回字符串cancel
          if (confirmResult !== 'confirm'){
            return this.$message.info("已取消删除")
          }
          //发送delete请求
          const {data: res} = await this.$http.delete('teamGroup/deleteGroup/' + groupName);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.getGroupList();
          return this.$message.success(res.msg);
        },
        handleSizeChange(newPageSize){
          //更新没页的条数
          this.groupData.pageSize = newPageSize;
          this.getGroupList();
        },
        handleCurrentChange(newPage){
          //更新页码
          this.groupData.pageNum = newPage;
          this.getGroupList();
        },
      }
    }
</script>
<style scoped lang="scss">
  .el-tag{
    margin: 7px;
  }
  .bdtop{
    border-top: 1px solid #EEEEEE;
  }
  .bdbottom{
    border-bottom: 1px solid #EEEEEE;
  }
  .vcenter{
    display: flex;
    align-items: center;
  }
</style>


